<template>
  <div class="layout-all">
    <control :config="config" />
    <div class="layout-header" style="float:left">
      <!-- <router-link to="/order_abt/order_list/form">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="margin-left:0px"
        >添加</el-button>
      </router-link> -->
    </div>
    <div class="layout-content">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%;margin-top:50px"
      >
        <el-table-column
          label="订单商品"
          align="center"
          type="expand"
          width="100"
        >
          <template slot-scope="scope">
            <el-table
              tooltip-effect="dark"
              :data="scope.row.barter_user"
              @selection-change="handleSelectionChange"
            >
              <!-- <el-table-column type="selection" width="29" /> -->
              <el-table-column align="center" prop="goods_title" label="商品名" width="150" />
              <el-table-column align="center" prop="goods_thumb" label="封面图" width="150">
                <template slot-scope="scope">
                  <img :src="scope.row.goods_thumb" width="100%">
                </template>
              </el-table-column>
              <el-table-column align="center" prop="goods_amount" label="价钱" width="80" />
              <el-table-column align="center" prop="send_status" label="发货状态" width="80">
                <template slot-scope="scope">
                  <el-tag
                    v-if="scope.row.send_status === 0"
                    type="warning"
                    disable-transitions
                  >未支付</el-tag>
                  <el-tag
                    v-if="scope.row.send_status === 1"
                    type="info"
                    disable-transitions
                  >待发货</el-tag>
                  <el-tag
                    v-if="scope.row.send_status === 2"
                    type="primary"
                    disable-transitions
                  >已发货</el-tag>
                  <el-tag
                    v-if="scope.row.send_status === 3"
                    type="success"
                    disable-transitions
                  >已完成</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="leader_name" label="收货人" width="150" />
              <el-table-column align="center" prop="user_tel" label="电话" width="150" />
              <!-- <el-table-column prop="can_refund_amount" label="退款金额" width="150" /> -->
              <el-table-column
                prop="express_name"
                label="快递公司"
                width="100"
              />
              <el-table-column align="center" prop="express_sn" label="快递单号" width="150" />
              <el-table-column
                align="center"
                prop="leader_full_address"
                label="详细地址"
                width="300"
              />
              <el-table-column align="center" prop="goods_desc" label="描述" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sn" label="订单号" width="220" />
        <el-table-column align="center" prop="status" label="订单状态" width="80">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === 0"
              type="warning"
              disable-transitions
            >申请</el-tag>
            <el-tag
              v-if="scope.row.status === 1"
              type="info"
              disable-transitions
            >同意</el-tag>
            <el-tag
              v-if="scope.row.status === 2"
              type="primary"
              disable-transitions
            >拒绝</el-tag>
            <el-tag
              v-if="scope.row.status === 3"
              type="success"
              disable-transitions
            >未补差价</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="create_time" label="创建时间" width="180" />
        <el-table-column align="center" prop="pay_amount" label="支付金额" width="120" />
        <el-table-column align="center" prop="pay_type" label="支付方式" width="120" />
        <el-table-column align="center" prop="pay_sn" label="支付单号" width="120" />
        <el-table-column align="center" prop="remark" label="备注" />
        <!-- <el-table-column
          prop="telephone"
          fixed="right"
          width="140"
          label="操作"
        > -->
        <!-- <template slot-scope="scope"> -->
        <!-- <router-link :to="'/order_abt/order_list/form?id=' + scope.row.id">
              <el-button type="primary" icon="el-icon-edit" />
            </router-link> -->
        <!-- <router-link :to="'/order_abt/order_list/form?id=' + scope.row.id">
              <el-button type="info">详情 </el-button>
            </router-link> -->
        <!-- <el-button
              type="primary"
              @click="logistics_isshow = true"
            >物流
            </el-button>
            <el-button type="success" @click="send_isshow()">发货 </el-button>
            <el-button type="warning" @click="refund_isshow()">退款 </el-button> -->
        <!-- <el-button
              type="danger"
              icon="el-icon-delete"
              @click="onDel(scope.row.id)"
            /> -->
        <!-- </template>
        </el-table-column> -->
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
     layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import control from '../../components/control/control'
export default {
  components: { control },
  data() {
    return {
      loading: true,
      config: [
        { type: 'text', placeholder: '请输入订单号', field: 'sn', val: '' },
        {
          type: 'select',
          placeholder: '请选择订单状态',
          field: 'status',
          val: '',
          options: [
            { value: '', label: '全部' },
            { value: 0, label: '申请' },
            { value: 1, label: '同意' },
            { value: 2, label: '拒绝' },
            { value: 3, label: '未补差价' }
          ]
        }
      ],
      searchWhere: {
        sn: ''
      },
      sn: '',
      tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14
    }
  },
  mounted() {
    this.onSearch()
  },
  methods: {
    // 查询
    handleSizeChange(val) {
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.onSearch()
    },
    onSearch() {
      this.loading = true
      const form = {}
      form.page = this.current_page
      form.map = this.searchWhere
      this.get('/admin/GoodsBarterOrder/index', form, 'POST').then(e => {
        this.tableData = e.list.data
        this.per_page = e.list.per_page
        this.total = e.list.total
        this.current_page = e.list.current_page
        this.loading = false
      })
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      console.log(id)
    },
    // 删除
    onDel(id) {
      this.$msg_confirm().then(e => {
        if (e) {
          this.get('/shop/Order/del?id=' + id, this.form, 'POST').then(e => {
            this.onSearch()
          })
        }
      })
    }
  }
}
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
</style>>
